<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上岗签到 - 护工助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <style>
        .signin-container {
            padding: 16px;
        }
        
        .signin-card {
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .signin-title {
            font-size: 18px;
            margin-bottom: 16px;
            text-align: center;
            font-weight: 500;
        }
        
        .signin-info {
            margin-bottom: 20px;
        }
        
        .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            font-size: 14px;
        }
        
        .info-label {
            color: #666;
        }
        
        .camera-preview {
            width: 100%;
            height: 280px;
            background-color: #f0f0f0;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            overflow: hidden;
            position: relative;
        }
        
        .camera-icon {
            font-size: 48px;
            color: #999;
            margin-bottom: 8px;
        }
        
        .camera-tip {
            font-size: 14px;
            color: #666;
        }
        
        .preview-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }
        
        .location-box {
            background-color: #f7f7f7;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        
        .location-icon {
            font-size: 24px;
            margin-right: 10px;
        }
        
        .location-text {
            flex: 1;
            font-size: 14px;
        }
        
        .action-buttons {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 12px;
        }
        
        .btn-retake {
            background-color: #f7f7f7;
            color: #666;
        }
        
        .btn-submit {
            background-color: #2B7DE1;
            color: white;
        }
        
        .btn {
            padding: 12px;
            border-radius: 6px;
            font-size: 16px;
            border: none;
            width: 100%;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 顶部状态栏 -->
        <header class="app-header">
            <div class="status-bar">
                <span class="time">10:25</span>
                <div class="status-icons">
                    <span class="icon icon-signal"></span>
                    <span class="icon icon-wifi"></span>
                    <span class="icon icon-battery"></span>
                </div>
            </div>
            <div class="header-content">
                <div class="back-button" onclick="history.back()">
                    <span class="icon">←</span>
                </div>
                <h1>上岗签到</h1>
                <div class="header-actions">
                    <!-- 占位 -->
                </div>
            </div>
        </header>

        <div class="signin-container">
            <div class="signin-card">
                <h2 class="signin-title">填写今日上岗信息</h2>
                
                <div class="signin-info">
                    <div class="info-row">
                        <span class="info-label">签到人：</span>
                        <span class="info-value">张护工</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">所属科室：</span>
                        <span class="info-value">内科</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">当前日期：</span>
                        <span class="info-value" id="current-date">2023-06-12</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">当前时间：</span>
                        <span class="info-value" id="current-time">10:25</span>
                    </div>
                </div>
                
                <div class="camera-preview" id="camera-box">
                    <div class="camera-icon">📷</div>
                    <div class="camera-tip">点击拍摄上岗照片</div>
                    <img src="" alt="预览照片" class="preview-image" id="preview-img">
                </div>
                
                <div class="location-box">
                    <span class="location-icon">📍</span>
                    <div class="location-text" id="location-text">正在获取位置信息...</div>
                </div>
                
                <div class="action-buttons">
                    <button class="btn btn-retake" id="btn-retake">重新拍摄</button>
                    <button class="btn btn-submit" id="btn-submit">确认签到</button>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="index.html" class="nav-item">
                <span class="nav-icon icon-home"></span>
                <span>首页</span>
            </a>
            <a href="orders.html" class="nav-item">
                <span class="nav-icon icon-orders"></span>
                <span>订单</span>
            </a>
            <a href="income.html" class="nav-item">
                <span class="nav-icon icon-income"></span>
                <span>收入</span>
            </a>
            <a href="profile.html" class="nav-item">
                <span class="nav-icon icon-profile"></span>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 更新时间日期
            updateDateTime();
            setInterval(updateDateTime, 1000);
            
            // 模拟获取位置
            setTimeout(updateLocation, 2000);
            
            // 相机预览点击事件
            const cameraBox = document.getElementById('camera-box');
            const previewImg = document.getElementById('preview-img');
            cameraBox.addEventListener('click', function() {
                if (previewImg.style.display !== 'block') {
                    takePicture();
                }
            });
            
            // 重新拍摄按钮
            document.getElementById('btn-retake').addEventListener('click', function() {
                resetCamera();
            });
            
            // 签到按钮
            document.getElementById('btn-submit').addEventListener('click', function() {
                if (previewImg.style.display === 'block') {
                    submitSignin();
                } else {
                    alert('请先拍摄上岗照片');
                }
            });
        });
        
        function updateDateTime() {
            const now = new Date();
            
            // 日期格式化
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const dateStr = `${year}-${month}-${day}`;
            
            // 时间格式化
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            const timeStr = `${hours}:${minutes}:${seconds}`;
            
            // 更新显示
            document.getElementById('current-date').textContent = dateStr;
            document.getElementById('current-time').textContent = timeStr;
            document.querySelector('.time').textContent = `${hours}:${minutes}`;
        }
        
        function updateLocation() {
            // 模拟位置信息获取
            const locations = [
                '北京市海淀区医院大楼B座',
                '广州市第一医院住院部',
                '上海市养老中心护理区',
                '深圳市中心医院内科部'
            ];
            const randomLocation = locations[Math.floor(Math.random() * locations.length)];
            document.getElementById('location-text').textContent = randomLocation;
        }
        
        function takePicture() {
            // 模拟拍照功能
            document.querySelector('.camera-icon').style.display = 'none';
            document.querySelector('.camera-tip').style.display = 'none';
            
            // 使用随机示例照片
            const demoImages = [
                'https://img.freepik.com/free-photo/nurse-measuring-patient-blood-pressure_23-2149191420.jpg',
                'https://img.freepik.com/free-photo/doctor-taking-notes-while-discussing-with-patient_23-2148348372.jpg'
            ];
            const randomImage = demoImages[Math.floor(Math.random() * demoImages.length)];
            
            const previewImg = document.getElementById('preview-img');
            previewImg.src = 'data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><rect width="300" height="300" fill="%23f0f0f0"/><text x="50%" y="50%" font-family="Arial" font-size="24" text-anchor="middle" fill="%23666">示例照片</text></svg>';
            previewImg.style.display = 'block';
            
            // 显示拍照成功提示
            showToast('拍照成功');
        }
        
        function resetCamera() {
            document.querySelector('.camera-icon').style.display = 'block';
            document.querySelector('.camera-tip').style.display = 'block';
            document.getElementById('preview-img').style.display = 'none';
        }
        
        function submitSignin() {
            // 模拟签到提交
            const submitBtn = document.getElementById('btn-submit');
            submitBtn.textContent = '提交中...';
            submitBtn.disabled = true;
            
            setTimeout(function() {
                showToast('签到成功！');
                setTimeout(function() {
                    window.location.href = 'index.html';
                }, 1500);
            }, 2000);
        }
        
        function showToast(message) {
            // 检查是否已有toast
            let toast = document.querySelector('.toast');
            if (toast) {
                toast.remove();
            }
            
            // 创建新的toast
            toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            // 样式
            toast.style.position = 'fixed';
            toast.style.left = '50%';
            toast.style.bottom = '10%';
            toast.style.transform = 'translateX(-50%)';
            toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            toast.style.color = 'white';
            toast.style.padding = '10px 20px';
            toast.style.borderRadius = '20px';
            toast.style.fontSize = '14px';
            toast.style.zIndex = '9999';
            toast.style.opacity = '0';
            toast.style.transition = 'opacity 0.3s';
            
            // 显示和自动隐藏
            setTimeout(() => {
                toast.style.opacity = '1';
            }, 10);
            
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }, 2000);
        }
    </script>
</body>
</html> 